<!DOCTYPE html>
<html lang="zh-CN">

<!-- 文档头部 -->
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="个人主页 - 管理系统">
    <meta name="theme-color" content="#3B82F6">
    <meta name="author" content="张小明">
    
    <!-- 标题 -->
    <title>管理系统 | 个人主页</title>
    
    <!-- 外部样式表 -->
    <link rel="stylesheet" href="styles.css">
    
    <!-- 管理页面特定样式 -->
    <style>
        /* 管理页面布局 */
        .admin-container {
            display: flex;
            min-height: 100vh;
            background-color: var(--light);
        }
        
        /* 侧边栏样式 */
        .sidebar {
            width: 260px;
            background-color: var(--white);
            box-shadow: var(--shadow);
            padding: 1.5rem;
            position: fixed;
            height: 100vh;
            overflow-y: auto;
            transition: var(--transition);
            z-index: 100;
        }
        
        .sidebar.collapsed {
            width: 80px;
        }
        
        .sidebar-header {
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid #E5E7EB;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .sidebar-logo {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            text-decoration: none;
            color: var(--primary);
            font-weight: bold;
            font-size: 1.25rem;
            transition: var(--transition);
        }
        
        .sidebar-logo:hover {
            transform: scale(1.05);
        }
        
        .sidebar-logo-icon {
            font-size: 1.5rem;
            font-weight: 700;
        }
        
        .sidebar-logo-text {
            transition: opacity 0.3s ease;
        }
        
        .sidebar.collapsed .sidebar-logo-text {
            opacity: 0;
            width: 0;
            overflow: hidden;
            white-space: nowrap;
        }
        
        .toggle-sidebar {
            background: none;
            border: none;
            color: var(--gray);
            cursor: pointer;
            font-size: 1.25rem;
            padding: 0.5rem;
            border-radius: 4px;
            transition: var(--transition);
        }
        
        .toggle-sidebar:hover {
            background-color: #F3F4F6;
            color: var(--primary);
        }
        
        /* 侧边栏导航 */
        .nav-menu {
            list-style: none;
        }
        
        .nav-group {
            margin-bottom: 1.5rem;
        }
        
        .nav-group-title {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--gray);
            margin-bottom: 0.75rem;
            font-weight: 500;
            transition: opacity 0.3s ease;
        }
        
        .sidebar.collapsed .nav-group-title {
            opacity: 0;
            height: 0;
            overflow: hidden;
            margin-bottom: 0;
        }
        
        .nav-item {
            margin-bottom: 0.25rem;
        }
        
        .nav-link {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            padding: 0.75rem;
            border-radius: 4px;
            text-decoration: none;
            color: var(--dark);
            font-weight: 500;
            transition: var(--transition);
        }
        
        .nav-link:hover {
            background-color: #F3F4F6;
            color: var(--primary);
        }
        
        .nav-link.active {
            background-color: #EFF6FF;
            color: var(--primary);
            font-weight: 600;
        }
        
        .nav-icon {
            font-size: 1.25rem;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
        }
        
        .nav-text {
            transition: opacity 0.3s ease;
        }
        
        .sidebar.collapsed .nav-text {
            opacity: 0;
            width: 0;
            overflow: hidden;
            white-space: nowrap;
        }
        
        /* 主内容区域 */
        .main-content {
            flex: 1;
            margin-left: 260px;
            transition: var(--transition);
        }
        
        .sidebar.collapsed + .main-content {
            margin-left: 80px;
        }
        
        /* 顶部导航栏 */
        .top-navbar {
            background-color: var(--white);
            box-shadow: var(--shadow);
            padding: 1rem 1.5rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 50;
        }
        
        .page-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--dark);
        }
        
        .user-profile {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .user-info {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }
        
        .user-name {
            font-weight: 500;
            color: var(--dark);
        }
        
        .user-role {
            font-size: 0.875rem;
            color: var(--gray);
        }
        
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid var(--light);
        }
        
        .logout-button {
            background-color: #F87171;
            color: var(--white);
            border: none;
            padding: 0.5rem 1rem;
            border-radius: 4px;
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
        }
        
        .logout-button:hover {
            background-color: #EF4444;
            transform: translateY(-2px);
            box-shadow: var(--shadow);
        }
        
        /* 内容区域 */
        .content {
            padding: 2rem;
        }
        
        /* 统计卡片 */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .stat-card {
            background-color: var(--white);
            border-radius: 8px;
            padding: 1.5rem;
            box-shadow: var(--shadow);
            transition: var(--transition);
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }
        
        .stat-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }
        
        .stat-title {
            font-size: 0.875rem;
            font-weight: 500;
            color: var(--gray);
        }
        
        .stat-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            color: var(--white);
        }
        
        .stat-value {
            font-size: 2rem;
            font-weight: 700;
            color: var(--dark);
        }
        
        .stat-change {
            font-size: 0.875rem;
            margin-top: 0.5rem;
        }
        
        .stat-change.positive {
            color: var(--secondary);
        }
        
        .stat-change.negative {
            color: #EF4444;
        }
        
        /* 最近项目表格 */
        .recent-projects {
            background-color: var(--white);
            border-radius: 8px;
            padding: 1.5rem;
            box-shadow: var(--shadow);
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        
        .section-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--dark);
        }
        
        .view-all-link {
            color: var(--primary);
            text-decoration: none;
            font-weight: 500;
            transition: var(--transition);
        }
        
        .view-all-link:hover {
            text-decoration: underline;
        }
        
        .projects-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .projects-table th,
        .projects-table td {
            padding: 1rem;
            text-align: left;
            border-bottom: 1px solid #E5E7EB;
        }
        
        .projects-table th {
            background-color: #F9FAFB;
            font-weight: 600;
            color: var(--dark);
        }
        
        .projects-table tr:hover {
            background-color: #F9FAFB;
        }
        
        .action-buttons {
            display: flex;
            gap: 0.5rem;
        }
        
        .btn {
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 4px;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            text-decoration: none;
            display: inline-block;
            text-align: center;
            font-size: 0.875rem;
        }
        
        .btn-primary {
            background-color: var(--primary);
            color: var(--white);
        }
        
        .btn-primary:hover {
            background-color: #2563EB;
            transform: translateY(-2px);
            box-shadow: var(--shadow);
        }
        
        .btn-secondary {
            background-color: var(--secondary);
            color: var(--white);
        }
        
        .btn-secondary:hover {
            background-color: #059669;
            transform: translateY(-2px);
            box-shadow: var(--shadow);
        }
        
        .btn-danger {
            background-color: #EF4444;
            color: var(--white);
        }
        
        .btn-danger:hover {
            background-color: #DC2626;
            transform: translateY(-2px);
            box-shadow: var(--shadow);
        }
        
        /* 响应式设计 */
        @media (max-width: 1024px) {
            .sidebar {
                transform: translateX(-100%);
            }
            
            .sidebar.active {
                transform: translateX(0);
            }
            
            .main-content {
                margin-left: 0;
            }
            
            .sidebar.collapsed + .main-content {
                margin-left: 0;
            }
            
            .mobile-menu-toggle {
                display: block;
            }
        }
        
        @media (max-width: 768px) {
            .stats-grid {
                grid-template-columns: 1fr;
            }
            
            .projects-table {
                display: block;
                overflow-x: auto;
                white-space: nowrap;
            }
            
            .top-navbar {
                flex-direction: column;
                gap: 1rem;
                align-items: flex-start;
            }
            
            .user-profile {
                width: 100%;
                justify-content: space-between;
            }
            
            .content {
                padding: 1rem;
            }
        }
        
        /* 移动端菜单按钮 */
        .mobile-menu-toggle {
            background: none;
            border: none;
            color: var(--dark);
            cursor: pointer;
            font-size: 1.5rem;
            display: none;
        }
        
        @media (max-width: 1024px) {
            .mobile-menu-toggle {
                display: block;
            }
        }
    </style>
</head>

<body>
    <div class="admin-container">
        <!-- 侧边栏导航 -->
        <aside id="sidebar" class="sidebar">
            <!-- 侧边栏头部 -->
            <div class="sidebar-header">
                <a href="index.html" class="sidebar-logo">
                    <span class="sidebar-logo-icon">{ }</span>
                    <span class="sidebar-logo-text">管理系统</span>
                </a>
                <button id="toggleSidebar" class="toggle-sidebar" aria-label="收起/展开侧边栏">
                    ⟳
                </button>
            </div>
            
            <!-- 侧边栏菜单 -->
            <ul class="nav-menu">
                <li class="nav-group">
                    <span class="nav-group-title">主要</span>
                    <li class="nav-item">
                        <a href="#dashboard" class="nav-link active">
                            <span class="nav-icon">📊</span>
                            <span class="nav-text">仪表盘</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#projects" class="nav-link">
                            <span class="nav-icon">📁</span>
                            <span class="nav-text">项目管理</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#profile" class="nav-link">
                            <span class="nav-icon">👤</span>
                            <span class="nav-text">个人资料</span>
                        </a>
                    </li>
                </li>
                
                <li class="nav-group">
                    <span class="nav-group-title">内容</span>
                    <li class="nav-item">
                        <a href="#about" class="nav-link">
                            <span class="nav-icon">ℹ️</span>
                            <span class="nav-text">关于页面</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#contact" class="nav-link">
                            <span class="nav-icon">✉️</span>
                            <span class="nav-text">联系方式</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#social" class="nav-link">
                            <span class="nav-icon">🔗</span>
                            <span class="nav-text">社交媒体</span>
                        </a>
                    </li>
                </li>
                
                <li class="nav-group">
                    <span class="nav-group-title">设置</span>
                    <li class="nav-item">
                        <a href="#account" class="nav-link">
                            <span class="nav-icon">⚙️</span>
                            <span class="nav-text">账户设置</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="#security" class="nav-link">
                            <span class="nav-icon">🔒</span>
                            <span class="nav-text">安全设置</span>
                        </a>
                    </li>
                </li>
            </ul>
        </aside>
        
        <!-- 主内容区域 -->
        <main class="main-content">
            <!-- 顶部导航栏 -->
            <header class="top-navbar">
                <div class="left-section">
                    <button id="mobileMenuToggle" class="mobile-menu-toggle" aria-label="打开侧边栏">
                        ☰
                    </button>
                    <h1 class="page-title">仪表盘</h1>
                </div>
                
                <div class="user-profile">
                    <div class="user-info">
                        <span class="user-name">张小明</span>
                        <span class="user-role">管理员</span>
                    </div>
                    <img 
                        src="https://picsum.photos/id/64/200/200" 
                        alt="用户头像" 
                        class="user-avatar"
                    >
                    <button id="logoutButton" class="logout-button">退出登录</button>
                </div>
            </header>
            
            <!-- 内容区域 -->
            <div class="content">
                <!-- 统计卡片 -->
                <div class="stats-grid">
                    <div class="stat-card">
                        <div class="stat-header">
                            <span class="stat-title">项目总数</span>
                            <span class="stat-icon" style="background-color: var(--primary);">📁</span>
                        </div>
                        <div class="stat-value">12</div>
                        <div class="stat-change positive">↑ 2个新项目</div>
                    </div>
                    
                    <div class="stat-card">
                        <div class="stat-header">
                            <span class="stat-title">页面访问量</span>
                            <span class="stat-icon" style="background-color: var(--secondary);">👁️</span>
                        </div>
                        <div class="stat-value">2.8K</div>
                        <div class="stat-change positive">↑ 12% 增长</div>
                    </div>
                    
                    <div class="stat-card">
                        <div class="stat-header">
                            <span class="stat-title">技能掌握</span>
                            <span class="stat-icon" style="background-color: var(--accent);">⚡</span>
                        </div>
                        <div class="stat-value">15</div>
                        <div class="stat-change positive">↑ 2项新技能</div>
                    </div>
                    
                    <div class="stat-card">
                        <div class="stat-header">
                            <span class="stat-title">更新次数</span>
                            <span class="stat-icon" style="background-color: #F59E0B;">🔄</span>
                        </div>
                        <div class="stat-value">48</div>
                        <div class="stat-change negative">↓ 5% 减少</div>
                    </div>
                </div>
                
                <!-- 最近项目表格 -->
                <div class="recent-projects">
                    <div class="section-header">
                        <h2 class="section-title">最近项目</h2>
                        <a href="#" class="view-all-link">查看全部</a>
                    </div>
                    
                    <table class="projects-table">
                        <thead>
                            <tr>
                                <th>项目名称</th>
                                <th>描述</th>
                                <th>状态</th>
                                <th>创建日期</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>个人博客系统</td>
                                <td>基于React和Node.js的全栈博客系统</td>
                                <td>进行中</td>
                                <td>2023-08-15</td>
                                <td>
                                    <div class="action-buttons">
                                        <a href="#" class="btn btn-primary">编辑</a>
                                        <button class="btn btn-danger">删除</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>电商网站</td>
                                <td>Vue.js和Express.js构建的在线购物平台</td>
                                <td>已完成</td>
                                <td>2023-07-22</td>
                                <td>
                                    <div class="action-buttons">
                                        <a href="#" class="btn btn-primary">编辑</a>
                                        <button class="btn btn-danger">删除</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>待办事项应用</td>
                                <td>使用Django构建的任务管理系统</td>
                                <td>计划中</td>
                                <td>2023-09-05</td>
                                <td>
                                    <div class="action-buttons">
                                        <a href="#" class="btn btn-primary">编辑</a>
                                        <button class="btn btn-danger">删除</button>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>聊天应用</td>
                                <td>WebSocket实时通讯应用</td>
                                <td>进行中</td>
                                <td>2023-08-30</td>
                                <td>
                                    <div class="action-buttons">
                                        <a href="#" class="btn btn-primary">编辑</a>
                                        <button class="btn btn-danger">删除</button>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>
    
    <!-- 管理页面脚本 -->
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 侧边栏切换功能
            const sidebar = document.getElementById('sidebar');
            const toggleSidebarBtn = document.getElementById('toggleSidebar');
            const mobileMenuToggle = document.getElementById('mobileMenuToggle');
            
            // 桌面端 - 侧边栏折叠/展开
            toggleSidebarBtn.addEventListener('click', function() {
                sidebar.classList.toggle('collapsed');
            });
            
            // 移动端 - 侧边栏显示/隐藏
            mobileMenuToggle.addEventListener('click', function() {
                sidebar.classList.toggle('active');
            });
            
            // 点击侧边栏外部时关闭侧边栏（移动端）
            document.addEventListener('click', function(event) {
                if (window.innerWidth <= 1024) {
                    if (!sidebar.contains(event.target) && 
                        !mobileMenuToggle.contains(event.target) && 
                        sidebar.classList.contains('active')) {
                        sidebar.classList.remove('active');
                    }
                }
            });
            
            // 响应式处理 - 调整窗口大小时重置侧边栏状态
            window.addEventListener('resize', function() {
                if (window.innerWidth > 1024) {
                    sidebar.classList.remove('active');
                }
            });
            
            // 导航链接激活状态
            const navLinks = document.querySelectorAll('.nav-link');
            
            navLinks.forEach(link => {
                link.addEventListener('click', function() {
                    // 移除所有链接的激活状态
                    navLinks.forEach(item => item.classList.remove('active'));
                    
                    // 为当前点击的链接添加激活状态
                    this.classList.add('active');
                    
                    // 如果是移动端，点击后关闭侧边栏
                    if (window.innerWidth <= 1024) {
                        sidebar.classList.remove('active');
                    }
                });
            });
            
            // 退出登录功能
            const logoutButton = document.getElementById('logoutButton');
            
            logoutButton.addEventListener('click', function() {
                if (confirm('确定要退出登录吗？')) {
                    // 在实际应用中，这里应该发送AJAX请求到服务器注销会话
                    alert('已成功退出登录！');
                    window.location.href = 'login.html';
                }
            });
            
            // 删除项目确认
            const deleteButtons = document.querySelectorAll('.btn-danger');
            
            deleteButtons.forEach(button => {
                button.addEventListener('click', function(event) {
                    event.preventDefault();
                    if (confirm('确定要删除此项目吗？此操作不可撤销。')) {
                        // 在实际应用中，这里应该发送AJAX请求到服务器删除项目
                        alert('项目已删除！');
                        // 可以添加代码来从DOM中移除该行
                        const row = this.closest('tr');
                        row.style.opacity = '0.5';
                        setTimeout(() => {
                            row.remove();
                        }, 500);
                    }
                });
            });
            
            // 为统计卡片添加动画效果
            const animateOnScroll = function() {
                const statCards = document.querySelectorAll('.stat-card');
                
                statCards.forEach(card => {
                    const cardPosition = card.getBoundingClientRect().top;
                    const screenPosition = window.innerHeight / 1.3;
                    
                    if (cardPosition < screenPosition) {
                        card.style.opacity = '1';
                        card.style.transform = 'translateY(0)';
                    }
                });
            };
            
            // 初始化统计卡片的动画状态
            document.querySelectorAll('.stat-card').forEach((card, index) => {
                card.style.opacity = '0';
                card.style.transform = `translateY(20px)`;
                card.style.transition = `all 0.5s ease ${index * 0.1}s`;
            });
            
            // 监听滚动事件
            window.addEventListener('scroll', animateOnScroll);
            
            // 初始执行一次动画检查
            animateOnScroll();
        });
    </script>
</body>

</html>